
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="http://getbootstrap.com/assets/ico/favicon.ico">

    <title>Registrar Sesión Odontológica | Atención al paciente</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/datepicker.css" rel="stylesheet">
    <link rel="stylesheet" href="js/farbtastic/farbtastic.css" type="text/css" />
    <link href="DataTables-1.10.0/media/css/jquery.dataTables.css" rel="stylesheet">

    <!-- Custom styles for this template -->
     <link href="css/jumbotron.css" rel="stylesheet"> 
     <link href="css/estilo2.css" rel="stylesheet" type="text/css" />

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

  
  
  </head>

  <body>

    <div class="navbar navbar-default navbar-fixed-top" role="navigation">

      <div class="container">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="atencion_paciente.htm">Sistema de Gestión Odontológica</a>
        </div>  
    
        <ul class="nav navbar-nav">
          <li ><a href="atencion_paciente.htm"><span class="glyphicon glyphicon-home"></span> Inicio</a></li>
          <li ><a href="#">Registrar Consulta</a></li>
          <li class="active"><a href="registrar_sesion.htm">Registrar Sesión</a></li>
          <li ><a href="#">Registrar Cita</a></li>

        </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a>Bienvenido: Jose</a></li>
        <form name="login" class="navbar-form navbar-right" role="form">
          <button type="button" class="btn btn-link"><a href="index.htm">cerrar sesión</a></button>
        </form>
        <!-- <li><button type="button" class="btn btn-link"><a href="index.htm">cerrar sesión</a></button></li> -->
        <!-- <li><a href="index.htm"><u>cerrar sesión</u></a></li> -->
      </ul>

      </div>
    </div>
    

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="container">
    <div class="page-header">
      <ul class="breadcrumb">
        <li><a href="almacen.htm">Atención al Paciente</a></li>
        <li class="active">Registrar Sesión</li>
      </ul>
      
        <h1>Registrar Sesión Odontológica</h1>
      </div>
    </div>



    <div class="container" >
      <!-- Example row of columns -->
      <div class="row" >
        <div class="col-md-12" >

      <div class="bs-example well well-red" style="padding-bottom: 24px;">
            <legend>Datos del Paciente <button id="boton_buscar" class="btn btn-link btn-sm " data-toggle="modal" data-target="#buscarModal"><span class="glyphicon glyphicon-search"></span> Buscar Paciente</button></legend>

            <form role="form"><!-- formulario ingresar nuevo producto -->
              <div class="row">
              <div class="col-md-6">
               <div class="form-group">

                <label for="name">Código</label>
                <br>
                <input type="text" class="form-control input-sm" id="buscar_codigo" disabled>
                  <br>

                    <label for="name">Dirección</label>
                    <br>
                    <input type="text" class="form-control input-sm" id="buscar_direccion" disabled>

                </div>

               </div>


                <div class="col-md-6">
                <div class="form-group ">
                <label for="name">Nombre</label>
                <br>
                <input type="text" class="form-control input-sm" id="buscar_nombre" disabled>

                <br>
                <label for="name">Telefono</label>
                <br>
                <input type="text" class="form-control input-sm" id="buscar_telefono" disabled>
               </div>


               </div>
            </form><!-- fin formulario -->
            </div>
      </div>




      <!-- Modal -->
      <div class="modal fade" id="buscarModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Buscar Paciente</h4>
          </div>
          <div class="modal-body">
        <table id="table_paciente" class="table " cellspacing="0" width="100%">
                  <thead>
                    <tr>
                      <th>Código</th>
                      <th>Nombre</th>
                      <th>Dirección</th>
                      <th>Teléfono</th>
                    </tr>
                  </thead>
               
                  <tbody>
                    <tr>
                      <td>001</td>
                      <td>Garrett Winters</td>
                      <td>Av. el Sol</td>
                      <td>12132323</td>
                    </tr>
                    <tr>
                      <td>002</td>
                      <td>Jorge Luis Ventura</td>
                      <td>Av. Rosales</td>
                      <td>1312312</td>
                    </tr>
                    <tr>
                      <td>003</td>
                      <td>Ashton Cox</td>
                      <td>Av. Brasil</td>
                      <td>5434223</td>
                    </tr>
        
                    <tr>
                      <td>004</td>
                      <td>Donna Snider</td>
                      <td>Av. Los Heroes</td>
                      <td>56234368</td>
                    </tr>
                  </tbody>
                </table>
          </div>
          <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-primary" id="boton_aceptar" data-dismiss="modal">Aceptar</button>
          </div>
        </div>
        </div>
      </div>




        <div class="col-md-12 well well-red " >
          <legend>Odontograma</legend>
          <form>
          <div>
            <label>Pincel</label>
            <input id="pencil" type="radio" name="tool" value="pencil" checked>
          </div>
          <div>
        <label>Borrador</label>
            <input id="eraser" type="radio" name="tool" value="eraser">   
          </div>
          </form>
          <center>
          <div id="sketch">
            <canvas id="paint"></canvas>
            <img src="img/odontograma.jpg">
          </div>
          </center>
        </div>

    
       
      <div class="col-md-12 well well-red ">
        <div class="form">
          <div class="row">
            <legend>Descripción de la Sesión</legend>
            <div class="col-md-6">
              <div class="form-group">
                <label for="name">Procedimiento Médico</label>
                <select id="mi_selector" class="form-control">
                  <option>Profilaxis</option>
                  <option>Implantes</option>
                  <option>Inactivación de caries</option>
                  <option>Amalgama Simple</option>
                  <option>Amalgama Compuesta</option>
                  <option>Resina Simple Anterior</option>
                  <option>Resina Simple Posterior</option>
                  <option>Ionomero restaurador</option>
                  <option>Apertura Cameral de Emergencia</option>
                  <option>Endodoncia Molar</option>
                </select>
                <br>
                <label for="name">Piezas Dentales</label>
                <input type="text" class="form-control input-sm" id="dientes" >
              </div>
            </div>
          </div>
        </div>
      </div>

              <br><br>
                <a id="boton_agregar_procedimiento" class="btn btn-primary ">Agregar Procedimiento</a>
        <a id="boton_quitar_procedimiento" class="btn btn-primary pull-right">Quitar Procedimiento</a>
      <table id="table_registro" class="table " cellspacing="0" width="100%">
          <thead>
            <tr>
              <th>Piezas Dentales</th>
              <th>Procedimiento Médico</th>

            </tr>
          </thead> 
       
          <tbody>
            <tr>
              <td>1,2,5</td>
              <td>Profilaxis</td>

            </tr>
          </tbody>
        </table>
        <br>
        <br>
        
        <center>
          <button id="boton_guardar" class="btn btn-large btn-success" data-toggle="modal" data-target="#guardarModal">
            Guardar Registro
          </center>
        </div>
        </div>

              <!-- Modal -->
      
      <div class="modal fade" id="guardarModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Confirmación</h4>
          </div>
          <div class="modal-body">
            Los datos del registro de entrada se guardaron con éxito
          </div>
          <div class="modal-footer">
          <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button> -->
          <!-- <button type="button" href="almacen.htm" class="btn btn-primary" id="boton_confirmacion" data-dismiss="modal">Aceptar</button> -->
          <a href="registrar_entrada.htm" class="btn btn-primary">Aceptar</a>
          </div>
        </div>
        </div>
      </div>

      </div>

      <hr>

      <footer>
        <p>&copy; Kuradent 2014</p>
      </footer>
    </div> <!-- /container -->

  </div>

      <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  <script  src="js/jquery-1.11.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
  <!-- <script type="text/javascript" charset="utf8" src="DataTables-1.10.0/media/js/jquery.js"></script> -->
  <script type="text/javascript" charset="utf8" src="DataTables-1.10.0/media/js/jquery.dataTables.js"></script>

  <script type="text/javascript" src="js/farbtastic.js"></script>
    <script type="text/javascript" src="js/dibujo.js"></script>
  <!--<script type="text/javascript" charset="utf8" src="js/dataTables.bootstrap.js"></script> -->
    <script>

    var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };

  $(document).ready( function () {

    $('#fecha').datepicker({
    format: "dd/mm/yyyy"
    }); 


    var rowData;
    var total = 0;
    var tabla_paciente = $('#table_paciente').DataTable({"language": {
            "lengthMenu": "Mostrando _MENU_ registros ",
            "zeroRecords": "No se encontraron coincidencias",
            "info": "Mostrando _PAGE_ of _PAGES_",
            "infoEmpty": "No hay registros disponibles",
            "search":         "Buscar:",
             "paginate": {
            "first":      "Primera",
            "last":       "Ultima",
            "next":       "Siguiente",
            "previous":   "Previa"
            },
            "infoFiltered": "(filtrado desde _MAX_ registros en total)"
        }});


 
    tabla_paciente.on( 'click', 'tr', function () {
      if ( $(this).hasClass('info') ) {
        $(this).removeClass('info');
      }
      else {
        tabla_paciente.$('tr.info').removeClass('info');
        $(this).addClass('info');
        rowData = tabla_paciente.row(this).data();
      }
    } );

    var tabla_reg = $('#table_registro').DataTable({

        "paging":   false,
        "ordering": false,
        "info":     false,
        "filter": false,
        "language": {
            "zeroRecords": "No ha ingresado datos",
            "infoEmpty": "No hay registros disponibles"}

  });

    tabla_reg.row(0).remove().draw( false ); 
    
    tabla_reg.on( 'click', 'tr', function () {
      if ( $(this).hasClass('info') ) {
        $(this).removeClass('info');
      }
      else {
        tabla_reg.$('tr.info').removeClass('info');
        $(this).addClass('info');
      }
    } );

    $('#boton_aceptar').click( function () {
      var datos=[];

      document.getElementById("buscar_codigo").value = rowData[0];
      document.getElementById("buscar_nombre").value = rowData[1];
      document.getElementById("buscar_direccion").value = rowData[2];
      document.getElementById("buscar_telefono").value = rowData[3];

    } );

    $('#boton_agregar_procedimiento').click( function () {
      var agregar = [];
      agregar[0] = 5;
      agregar[1] = document.getElementById("mi_selector").value;

      tabla_reg.row.add(agregar);
      tabla_reg.draw();
    } );

    $('#boton_quitar_procedimiento').click( function () {

      tabla_reg.row('.info').remove().draw( false );
      
    } );

  } );



  </script>

  </body>
</html>
